<template>
    <span  class="status-span"
           :class="type ? 'status-span-' + type: ''">
        <slot></slot>
    </span>
</template>

<script>
    export default {
        name: "status-span",
        props: {
            type: '',
            text: '',
        },

    }
</script>

<style scoped lang="scss">
    .status-span {
        padding: 2px 10px;
        color: #fff;
        background: #147AFF;
        border-radius: 12px;
        cursor: default;
    }
    .status-span-success {
        background: #34D5B5;
    }
    .status-span-warning {
        background: #FFA451;
    }
    .status-span-danger {
        background: #EF5451;
    }
</style>